<template>
	<view class="page">
		<view class="flex-container flex-center j-s wbox">
			<view :style="{'filter':(item.status==='unsigned'?'grayscale(100%)':'')}" class="jef"
				v-for="(item,index) in list">
				<image style="width: 2rem;height: 2rem;" src="../../../../static/tabBar/jief.png" mode=""></image>
				<template v-for="(it,index) in day">
					<view class="day" v-if="item.dayOfWeek === it.en">{{ it.zh }}</view>
				</template>
			</view>
		</view>
		<u-button color="linear-gradient(to right, rgb(243, 81, 6), rgb(250, 82, 15))" class="button-layout__item"
			type="primary" @click="submit()" shape="circle" text="按钮形状">领取</u-button>
		<u-toast ref="uToast"></u-toast>
		<u-transition mode="fade" :show="showFeedback">
			<view class="feedback-toast">
				<view class="feedback-content">
					<image src="../../../../static/tabBar/jief.png" mode="aspectFill" class="feedback-image"></image>
				</view>
				<view style="color: #fff;font-size: 1rem;text-align: center;">积分</view>
				<view class="feedji">{{pointsReward}}</view>
			</view>
		</u-transition>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				list: [],
				showFeedback: false,
				day: [{
						en: 'Monday',
						zh: '第1天'
					},
					{
						en: 'Tuesday',
						zh: '第2天'
					},
					{
						en: 'Wednesday',
						zh: '第3天'
					},
					{
						en: 'Thursday',
						zh: '第4天'
					},
					{
						en: 'Friday',
						zh: '第5天'
					},
					{
						en: 'Saturday',
						zh: '第6天'
					},
					{
						en: 'Sunday',
						zh: '第7天'
					}
				]
			}
		},
		components: {

		},
		created() {
			this.loadData()
		},
		mounted() {

		},
		computed: {
			...mapGetters(['userInfo']),
			userId() {
				return this.userInfo ? this.userInfo.uid : null;
			},
			checkinId() {
				// 遍历列表，找到第一个未签到的选项并返回其 checkinId
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].status === 'unsigned') {
						return this.list[i].checkinId;
					}
				}
				// 如果没有找到未签到的选项，返回 null 或者其他默认值
				return null;
			},
			pointsReward() {
				// 遍历列表，找到第一个未签到的选项并返回其 checkinId
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].status === 'unsigned') {
						return this.list[i].pointsReward;
					}
				}
				// 如果没有找到未签到的选项，返回 null 或者其他默认值
				return null;
			}
		},
		methods: {
			async loadData() {
				const param = {
					userId: this.userId
				}
				const res = await this.$request.get('/system/checkin-record/list', param)
				console.log(res);
				if (res.code === 200) {
					this.list = res.data.list
				} else {

				}
			},
			async submit() {
				const param = {
					userId: this.userId,
					checkinId: this.checkinId
				}
				const res = await this.$request.post('/system/checkin-record/daily', param)
				console.log(res);
				if (res.code === 200) {
					// 页面加载后显示反馈弹窗
					this.showFeedback = true;
					// 3秒后隐藏反馈弹窗
					setTimeout(() => {
						this.showFeedback = false;
						this.loadData();
					}, 1500);
				} else {
					this.$refs.uToast.show({
						type: 'error',
						title: '失败主题',
						message: res.message,
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					});
				}
			},
		},
		watch: {
			'$options.methods.submit': function() {
				// 监听 submit 方法的调用，每次触发都重新加载数据
				this.loadData();
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		height: 100%;
	}

	.wbox {
		width: 100%;
		margin: 0 auto;
		padding: 1rem 0rem;
		background-color: #ffffff;

		.jef {
			width: calc(100%/7.9);
			height: 3rem;
			border-radius: 0.4rem;
			padding: 1rem 0;
			background-image: linear-gradient(to right, rgb(255, 85, 0), rgb(255, 0, 0));
			color: #ffffff;
			text-align: center;

			.day {
				font-size: 2px;

			}
		}
	}


	.button-layout__item {
		margin-top: 1rem;
		width: 10rem;
		font-size: 0.4rem;
	}

	/* 在你的样式表中 */
	.feedback-toast {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-image: linear-gradient(to right, rgb(255, 103, 15), rgb(255, 123, 15));
		/* 黄色背景 */
		width: 300rpx;
		height: 300rpx;
		border-radius: 10px;

		.feedji {
			font-size: 3rem;
			text-align: center;
			color: #ffe203;
		}
	}

	.feedback-content {
		width: 3rem;
		height: 3rem;
		text-align: center;
		margin: 0 auto;
		margin-top: 1rem;
	}

	.feedback-image {
		width: 100%;
		height: 100%;
		border-radius: 10px;
		/* 圆角 */
	}
</style>